<template>
    <div class="about">
        <common-banner name="联系我们" en-name="Contact Us"></common-banner>

        <div class="page-center">
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right" class="mt-20 mb-20">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>联系我们</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="contact-container">
                <div class="info-section">
                    <div class="info-content">
                        <p>地址：深圳市龙华区民治街道民康路292号青创城D栋3A1</p>
                        <p>电话：4000505016 QQ：3001272453</p>
                        <p>传真：0086-755-28094224</p>
                        <p>邮箱：sales@phystandard.com</p>
                    </div>
                </div>

                <div class="form-section">
                    <el-form :model="formData" :rules="rules" ref="formRef" label-width="80px">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="姓名" prop="name">
                                    <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="电话" prop="phone">
                                    <el-input v-model="formData.phone" placeholder="请输入电话"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="微信" prop="wechat">
                                    <el-input v-model="formData.wechat" placeholder="请输入微信"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="内容" prop="content">
                                    <el-input
                                        v-model="formData.content"
                                        type="textarea"
                                        rows="1"
                                        placeholder="请输入内容"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-form-item>
                            <el-button type="primary" :loading="submitting" @click="handleSubmit">提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

            <!-- TODO 具体标注点请https://dafrok.github.io/vue-baidu-map/#/参照修改 -->
            <baidu-map class="map" :center="{ lng: 116.404, lat: 39.915 }" :zoom="15">
                <bm-marker :position="{ lng: 116.404, lat: 39.915 }" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
                    <bm-label
                        content="北京天安门"
                        :labelStyle="{ color: 'red', fontSize: '24px' }"
                        :offset="{ width: -35, height: 30 }"
                    />
                </bm-marker>
            </baidu-map>
        </div>
    </div>
</template>
<script setup>
import CommonBanner from '@/components/CommonBanner.vue'

import { ref, reactive } from 'vue'
import { Message } from 'element-ui'

document.title = `联系我们 ${document.title}`

// 表单ref
const formRef = ref(null)

// 提交状态
const submitting = ref(false)

// 表单数据
const formData = reactive({
    name: '',
    phone: '',
    wechat: '',
    content: '',
})

// 表单验证规则
const rules = {
    phone: [
        { required: true, message: '请输入电话号码', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
    ],
    wechat: [{ required: true, message: '请输入微信号', trigger: 'blur' }],
}

// 提交表单
const handleSubmit = async () => {
    if (!formRef.value) return

    try {
        await formRef.value.validate()
        submitting.value = true

        // TODO: 这里添加实际的提交逻辑

        Message.success('提交成功')
        formRef.value.resetFields()
    } catch (error) {
        Message.error('请检查表单内容')
    } finally {
        submitting.value = false
    }
}
</script>
<style lang="scss" scoped>
.contact-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0px;
}

.info-section {
    flex: 0 0 400px;
    background-color: #52aac7;
    color: white;
    padding: 30px;
}

.info-content {
    line-height: 2;
}

.info-content p {
    margin-bottom: 10px;
}

.form-section {
    flex: 1;
    padding: 20px;
    background-color: rgb(249, 249, 249);
}

@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }

    .info-section {
        flex: none;
    }

    .page-center {
        width: auto !important;
    }
    .breadcrumb {
        margin-left: 10px;
    }

    .form-section {
        .el-row {
            display: block !important;

            .el-col-12 {
                width: 100% !important;
            }
        }
    }
}

.map {
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
}
</style>
